<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="dist/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="examples/assets/app.css">


</head>
<body>
<form role="form">
    <div class="form-group">
        <label for="tagInput">输入</label>
        <input class="label-success" type="text" class="form-control" id="tagInput">
    </div>
</form>

</body>
<script src="../jQuery/jquery-1.11.1.js"></script>
<script src="../../bootstrap/js/bootstrap.js"></script>
<script src="dist/bootstrap-tagsinput.js"></script>
<script src="lib/typeahead.js/typeahead.bundle.js"></script>
<script>


    var date=new Date().getTime();
    var cities = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('filter'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: 'examples/assets/cities.json?date='+date
    });
    cities.initialize();

    var elt = $('#tagInput');
    elt.tagsinput({
        itemValue: 'text',//提交表单的值
        itemText: 'value',//选中后显示的值
        typeaheadjs: {
            name: 'cities',
            displayKey: 'text',//下拉显示的值
            source: cities.ttAdapter()
        }
    });
    elt.tagsinput('add',{"value": 1 , "text": "Amsterdam"   , "continent": "Europe"  });

</script>
</html>